<template>
  <div class="app-main">
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <a-row class="row-form">
        <a-form-model v-bind="formItemLayout" @keyup.enter.native="onQuery">
          <a-col :span="8">
            <a-form-model-item label="公民身份号码" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
              <a-input v-model="form.identityCard" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="姓名">
              <a-input v-model="form.name" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="联系方式">
              <a-input v-model="form.number" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="原罪名">
              <j-dict-select-tag v-model="form.originalSinName" placeholder="请选择" dictCode="place_of_detention" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="危险性评估">
              <j-dict-select-tag v-model="form.typeOfHazardAssessment" placeholder="请选择" dictCode="dangerous" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="释放日期">
              <a-date-picker v-model="form.releaseDate" valueFormat="YYYY-MM-DD" style="width:100%;" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :wrapper-col="{ offset: 0 }">
              <a-space style="padding-left: 8px;">
                <a-button type="primary" @click="onQuery"> 查询 </a-button>
                <a-button @click="onResetForm"> 重置 </a-button>
              </a-space>
            </a-form-model-item>
          </a-col>
        </a-form-model>
      </a-row>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <a-space style="margin-bottom: 18px;">
        <a-button @click="handleExportXls()" :loading="confirmLoading"><a-icon type="upload" />导出</a-button>
        <a-button @click="handleImportXls"><a-icon type="import" />导入</a-button>
        <a @click="dowloadsXls">下载导入模板</a>
      </a-space>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table
          ref="table"
          rowKey="specialId"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @change="onTableChange"
        />
      </div>
    </a-card>
    <j-import-modal ref="importModal" :url="importUrl" @ok="handleOk" />
    <dispose-modal ref="disposeModal" @ok="handleOk" />
    <alarm-modal ref="alarmModal" />
  </div>
</template>

<script>
import * as specialApi from '@/api/xlgc/special.js'
import { downLoadFileReader } from '@/utils/export-util/util'
import disposeModal from './modules/disposeModal'
import alarmModal from './modules/alarmModal'
import { downLoadMix } from '@/utils/export-util/util'
export default {
  components: { disposeModal, alarmModal },
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      },
      loading: false,
      confirmLoading: false,
      form: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '公民身份号码',
          width: 80,
          align: 'center',
          dataIndex: 'identityCard',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 70,
          align: 'center',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '联系方式',
          dataIndex: 'number',
          width: 90,
          align: 'center',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '籍贯',
          dataIndex: 'nativePlace',
          width: 150,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={10} />
          }
        },
        {
          title: '原罪名',
          dataIndex: 'originalSinName',
          width: 150,
          align: 'center',
          customRender: text => {
            if (this.$filterDictTextByCache('place_of_detention', text)) {
              return <j-ellipsis value={this.$filterDictTextByCache('place_of_detention', text)} length={10} />
            } else {
              return '--'
            }
          }
        },
        {
          title: '危险性评估',
          dataIndex: 'typeOfHazardAssessment',
          width: 90,
          align: 'center',
          customRender: text => {
            if (this.$filterDictTextByCache('dangerous', text)) {
              return <j-ellipsis class={text == '01' ? 'text-color-red' : ''} value={this.$filterDictTextByCache('dangerous', text)} length={6} />
            } else {
              return '--'
            }
          }
        },
        {
          title: '释放日期',
          dataIndex: 'releaseDate',
          width: 90,
          align: 'center',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '创建日期',
          dataIndex: 'createTime',
          width: 90,
          align: 'center',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '更新日期',
          dataIndex: 'updateTime',
          width: 90,
          align: 'center',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '更新人',
          dataIndex: 'updateBy',
          width: 70,
          align: 'center',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '操作',
          width: 100,
          dataIndex: 'action',
          align: 'center',
          customRender: (text, record, index) => {
            return (
              <a-space class="action-button">
                <a-button type="link" style="padding: 0;" onClick={() => this.handleRouter('view', record)}>查看</a-button>
                <a-button type="link" style="padding: 0;" onClick={() => this.handleDispose('addDispose', record)}>处置</a-button>
                <a-button type="link" style="padding: 0;" onClick={() => this.handleAlarm(record)}>一键报警</a-button>
              </a-space>
            )
          }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  computed: {
    importUrl() {
      return specialApi.releaseImportUrl
    }
  },
  created() {},
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      specialApi.getListRelease(form).then(res => {
        this.loading = false
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.$message.warn(res.message)
        }
      })
      .catch(e => {
        this.loading = false
        this.$message.warn('请求失败！')
      })
    },
    handleExportXls() {
      this.confirmLoading = true
      let selectList = this.$refs.table.getSelectedRows()
      let obj = {
        ids: selectList.map(v => v.specialId),
        ...this.form
      }
      specialApi.exportRelease(obj).then(async res => {
        const fileName = '刑满释放人员.xls'
        await downLoadFileReader(res, fileName)
        this.confirmLoading = false
        this.$refs.table.onClearRowKeys()
      })
    },
    dowloadsXls() {
      specialApi.getTempletExcel({ type: 13 }).then(res => {
        if (res && res.size > 0) {
          const fileName = '刑满释放人员模板.xls'
          downLoadMix(res, fileName)
        } else {
          this.$message.warn('模板不存在！')
        }
      })
      // specialApi.getTemplateRelease().then(res => {
      //   if (res.success) {
      //     const url = res.result
      //     if (!url) return
      //     const elt = document.createElement('a')
      //     elt.setAttribute('href', url)
      //     elt.style.display = 'none'
      //     document.body.appendChild(elt)
      //     elt.click()
      //     document.body.removeChild(elt)
      //   } else {
      //     this.$message.warn('模板下载失败！')
      //   }
      // })
      // .catch(e => {
      //   this.$message.warn('请求失败！')
      // })
    },
    handleImportXls() {
      this.$refs.importModal.show()
    },
    handleOk() {
      this.onQuery()
    },
    handleRouter(type, record) {
      let path = '/person/details'; let query = { type: 1, id: record.specialId }
      this.$router.push({ path: path, query })
    },
    handleDispose(status, record) {
      this.$refs.disposeModal.show(status, record)
    },
    handleAlarm(record) {
      this.$refs.alarmModal.show()
    }
  }
}
</script>
<style lang="less" scoped>
.row-form {
  .ant-col {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 85%;
      height: 1px;
      border-bottom: 1px #d6d6d6 dashed;
    }
    &:last-child {
      &::after {
        border: 0;
      }
      .ant-form-item {
        margin-bottom: 0;
      }
    }
  }
  .ant-form-item {
    margin-bottom: 18px;
    &.c-label {
      /deep/.ant-form-item-label {
        width: 81px;
      }
    }
  }
}
.action-button {
  .ant-btn {
    padding-left: 8px;
    padding-right: 0;
  }
}
.text-color-red {
  color: #D9001B;
}
</style>
